<template>
	<view class="info_wrapper">
		<view class="head">
			<Header @filter="filterFuc" :customDate="customDate" :shadow="false" @toNext="toNext" :myElevator="true"
				:filterList="filterList"></Header>
			<!-- 	<uni-nav-bar left-icon="back" title="历史维修保养记录" 
		     color="#fff"
			statusBar="true" :fixed="false" backgroundColor="rgba(0, 0, 0, 1)" @clickLeft="handleBack"></uni-nav-bar> -->
		</view>
		<view class="item_top">
			<view class="top_address">
				<view class="top_L">
					<image src="/static/images/index/build.svg"></image>
					<text>{{ upperData.name + upperData.address }}</text>
					<text>{{ listTit[0].cont }}</text>
				</view>
				<view class="top_R" @click="navigationPath">
					<image src="/static/images/locations.png" mode=""></image>
					<text>导航</text>
				</view>
			</view>
			<view class="top_title">
				<view :class="activeIndex == i ? 'title_t' : 'title_act'" v-for="(item, i) in listTit" :key="i"
					@click="selectHandle(item, i)">
					<text>{{ item.name }}({{ item.cont }})</text>
					<text></text>
				</view>
			</view>
		</view>
		<view class="item_conten">
			<view class="dataList" v-for="(item, index) in dataList" :key="index">
				<view v-if="activeIndex != 3">
					<list-card :msg="item" @toDetail="toDetail" v-if="activeIndex === 0"></list-card>
					<repair-list-card :msg="item" v-if="activeIndex === 1">></repair-list-card>
					<partCard :msg="item" :isLast="index == dataList.length - 1 ? true : false" v-if="activeIndex === 2">>
					</partCard>
				</view>
				<view v-else class="rescueItem" :style="{ border: index == 0 ? 'none' : '' }" @click="toRescue(item)">
					<view class="title">
						<view>{{ item.planTitle }}</view>
						<uni-icons color="#999999" type="forward"></uni-icons>
					</view>
					<view class="tag">{{ item.typeStatusDesc }}</view>
					<view class="rescueItem_opt">报警类型:{{ item.trapTypeDesc }}</view>
					<view class="rescueItem_opt">完成时间:{{ item.planEndTime }}</view>
				</view>
			</view>
			<view class="empty" v-if="!dataList.length">
				<image src="https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/1753922096215_rkdkf67i.png" mode=""></image>
				<view>暂无数据</view>
			</view> 
		</view> 
		<time-select :beforeToday="true" :atterToday="true" :isChooseToday="true" v-if="selectTimePopup"
			@close="closeSelectTimePopup"></time-select>
		<view v-show="isLoadMore"><uni-load-more :status="loadStatus"></uni-load-more></view>
	</view>
</template>

<script>
import timeSelect from '@/pages/index/components/timeSelect.vue';
import Header from '@/pages/index/components/header.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniloadmore from '@/components/uni-load-more/uni-load-more.vue';
import { getElevatorHistory, history, historyList, rescueHistoryList } from '@/apis/barrierSearch.js';
import { elevtorDetail } from '@/apis/elevator.js';
import { getMonthDate, formatTime } from '@/utils/utils.js';
import ListCard from '@/subpages/maintenanceStatistics/components/listCard.vue';
import RepairListCard from './components/repariListCard.vue';
import partCard from './components/partCard.vue';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			filterList: [
				{
					id: 3,
					name: '本月'
				},
				{
					id: 4,
					name: '自定义'
				}
			],
			customDate: '',
			startTime: '',
			endTime: '',
			listTit: [
				// {id:1,name:"全部",cont:0,child:[],status:true},
				{ id: 0, name: '保养', cont: 0, child: [], status: true },
				{ id: 1, name: '维修', cont: 0, child: [], status: false },
				{ id: 3, name: '配件更换', cont: 0, child: [], status: false },
				{ id: 4, name: '救援', cont: 0, child: [], status: false }

				// {id:4,name:"专项保养",cont:0,child:[],status:false},
			],
			activeIndex: 0,
			colorArr: ['#6dd400', '#f7b500'],
			listData: [],
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			selectTimePopup: false,
			searchTypes: 1,
			obj: {
				current: 1,
				size: 10,
				elevatorId: ''
			},
			loadStatus: '',
			showData: false,
			dataCount: {},
			upperData: {},
			detailData: {},
			totalPages: null, // 总页数
			repairList: [], // 维修列表
			maintainList: [], // 保养列表
			partList: [], // 配件更换列表
			isLoadMore: false,
			planStatus: '',
			typeStatusMap: {
				0: {
					typeStatus: 1,
					count: 'checkCount'
				},
				1: {
					typeStatus: 2,
					count: 'malCount'
				},
				2: {
					typeStatus: 4,
					count: 'partsCount'
				},
				// 救援
				3: {
					typeStatus: 5,
					count: 'rescue'
				},
			},
			dataList: []
		};
	},
	components: {
		Header,
		timeSelect,
		uniloadmore,
		uniNavBar,
		ListCard,
		RepairListCard,
		partCard
	},
	onLoad(opt) {
		// uni.getStorage({
		// 	key: 'statistical',
		// 	success: res => {
		// 		console.log('store', res.data);
		// 		this.obj.userIds = res.data.id||this.userinfo.user_id;

		// 	}
		// });
		let data = JSON.parse(opt.data);
		this.upperData = data;
		this.planStatus = data.planStatus || '';
		this.obj.elevatorId = data.elevatorId;
		this.initElevtorDetail(data.elevatorId);
		this.initHistory();
	},
	onShow() {
		// this.initHistory()
	},
	onReachBottom() { 
		if (!this.isLoadMore) {
			// 此处判断，上锁，防止重复请求
			this.isLoadMore = true;
			this.obj.current += 1;
			this.initHistory();
		}
	},
	onPullDownRefresh() {
		this.obj.current = 1;
		if (this.activeIndex === 0) {
			this.maintainList = [];
		}
		if (this.activeIndex === 1) {
			this.repairList = [];
		}
		if (this.activeIndex === 2) {
			this.partList = [];
		}
		this.initHistory();
		setTimeout(function () {
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		}, 1000);
	},
	computed: {
		...mapState('user', ['userinfo']),
		isEmpty() {
			let flag = false;
			if (this.activeIndex == 0 && !this.maintainList.length) {
				flag = true;
			} else if (this.activeIndex == 1 && !this.repairList.length) {
				flag = true;
			} else if (this.activeIndex == 2 && !this.partList.length) {
				flag = true;
			}
			return flag;
		}
	},
	methods: {
		// 跳转救援详情
		toRescue(item) {
			uni.navigateTo({
				url: `/subpages/rescue/rescueDetail?planId=${item.planId}`
			});
		},
		initHistory() {
			uni.showLoading({
				title: '数据加载中'
			});
			this.state = 'loading';
			const params = {
				...this.obj,
				typeStatus: this.typeStatusMap[this.activeIndex].typeStatus,
				startTime: this.startTime || formatTime(getMonthDate().startDate),
				endTime: this.endTime || formatTime(getMonthDate().endDate)
			}; 
			rescueHistoryList(params).then(res => {
				// 救援写死
				this.listTit[3].cont = res.data.total;
				if (this.activeIndex == 3) {
					this.dataList = this.dataList.concat(res.data.records);
					if (res.data.records.length < this.obj.size) {
						this.isLoadMore = true;
						this.loadStatus = 'noMore';
					} else {
						this.isLoadMore = false;
					}
				}
			});
			historyList(params).then(res => {
				if (res.code === 200) {
					uni.hideLoading();
					if (this.activeIndex != 3) {
						for (let i = 0; i < this.listTit.length; i++) {
							if (i != this.listTit.length - 1) {
								this.listTit[i].cont = res.data[this.typeStatusMap[i].count];
							}
						}
						this.dataList = this.dataList.concat(res.data.list.records);
						if (res.data.list.length < this.obj.size) {
							this.isLoadMore = true;
							this.loadStatus = 'noMore';
						} else {
							this.isLoadMore = false;
						}
					}
					// const {allCount,malCount,checkCount,specialCount}=res.data
					// let arr = [allCount,malCount,checkCount,specialCount]
					// console.log(arr,125255)
					// let result = res.data.elevatorPlanHistoryPage.records || []
					// for(let i = 0; i < this.listTit.length; i++){
					// 	this.listTit[i].cont = arr[i]
					// }
					// if(result.length > 0){
					// 	let orginArr =  this.listData
					// 	this.totalPages= res.data.elevatorPlanHistoryPage.pages
					// 	this.listData = orginArr.concat(result)
					// 	this.state = "noMore"

					// }else{

					// 	this.state = "noMore"

					// }
					// if(type === "act"){
					// 	this.listData = result
					// }
				}
			});
			// getElevatorHistory(this.obj).then(res=>{
			// 	if(res.code === 200){
			// 		const {allCount,malCount,checkCount,specialCount}=res.data
			// 		let arr = [allCount,malCount,checkCount,specialCount]
			// 		console.log(arr,125255)
			// 		let result = res.data.elevatorPlanHistoryPage.records || []
			// 		for(let i = 0; i < this.listTit.length; i++){
			// 			this.listTit[i].cont = arr[i]
			// 		}
			// 		if(result.length > 0){
			// 			let orginArr =  this.listData
			// 			this.totalPages= res.data.elevatorPlanHistoryPage.pages
			// 			this.listData = orginArr.concat(result)
			// 			this.state = "noMore"

			// 		}else{

			// 			this.state = "noMore"

			// 		}
			// 		if(type === "act"){
			// 			this.listData = result
			// 		}
			// 	}
			// })
		},
		initElevtorDetail(id) {
			elevtorDetail({
				elevatorId: id
			}).then(res => {
				if (res.code === 200) {
					this.detailData = res.data;
				}
			});
		},
		toNext() {
			// let pages = getCurrentPages();
			// let prevPage = pages[pages.length - 2];
			uni.navigateBack({
				delta: 1
			});
		},
		filterFuc(type) { 
			this.showData = false;
			if (type.id === 4) {
				this.selectTimePopup = true;
				// this.obj.keyword = type.id-1
			}
			if (type.id === 3) {
				this.startTime = formatTime(getMonthDate().startDate);
				this.endTime = formatTime(getMonthDate().endDate);
				this.resSetCondition();
			}
		},
		closeSelectTimePopup(val) { 
			this.selectTimePopup = false;
			this.showData = false;
			if (val) {
				if (val.includes('-')) {
					let ary = val.split('-');
					let start = ary[0].replaceAll('.', '-');
					let end = ary[1].replaceAll('.', '-');
					this.startTime = start;
					this.endTime = end; 
					this.customDate = start.slice(5) + '~' + end.slice(5);
				} else {
					const time = val.replaceAll('.', '-');
					this.startTime = time;
					this.endTime = time;
					this.customDate = time;
				}

				// 触发headername的改变
				this.resSetCondition();
			}
		},
		selectHandle(obj, i) {
			this.activeIndex = i;
			this.obj.current = 1;
			this.dataList = [];
			this.resSetCondition();
		},

		navigationPath() { 
			uni.openLocation({
				latitude: parseFloat(this.detailData.latitude),
				longitude: parseFloat(this.detailData.longitude),
				name: this.upperData.name,
				address: this.upperData.address,
				scale: 18,
				complete: e => { 
				}
			});
		},
		handleBack() {
			uni.navigateBack({});
		},
		// 重置条件
		resSetCondition() {
			// this.repairList = [];
			// this.maintainList = [];
			// this.partList=[]
			this.dataList = [];
			this.obj.current = 1;
			this.initHistory();
		},
		toDetail({ planId, elevatorId }) {
			uni.navigateTo({
				url: `/subpages/workOrders/detail?planId=${planId}&elevatorId=${elevatorId}`
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f8f8f8;
}

.info_wrapper {
	.maintainList {
		background-color: #f8f8f8;
		border: 8rpx;
	}

	.head {
		width: 100%;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.item_top {
		background-color: #ffffff;
		background-color: #ffffff;
		position: sticky;
		top: 100rpx;
		left: 0;

		.top_address {
			display: flex;
			flex-direction: row;
			padding: 36rpx;

			.top_L {
				flex: 0 0 400rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;

				image {
					width: 48rpx;
					height: 48rpx;
					vertical-align: middle;
				}

				text:nth-child(2) {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					margin-left: 10rpx;
				}

				text:nth-child(3) {
					margin-left: 10rpx;
					display: inline-block;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					width: 28rpx;
					height: 28rpx;
					background: #e9e9e9;
					border-radius: 50%;
					text-align: center;
					line-height: 28rpx;
				}
			}

			.top_R {
				flex: 1;
				text-align: right;

				image {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
				}

				text {
					font-size: 24rpx;
					font-weight: 500;
					color: #666666;
				}
			}
		}

		.top_title {
			width: 680rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: row;

			.title_t {
				// width: 150rpx;
				text-align: center;

				text:nth-child(1) {
					display: block;
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
				}

				text:nth-child(2) {
					display: block;
					border-bottom: 4rpx #333333 solid;
					width: 100rpx;
					margin: 0 auto;
					margin-top: 15rpx;
				}
			}

			.title_act {
				width: 150rpx;
				text-align: center;

				text:nth-child(1) {
					display: block;
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
				}

				text:nth-child(2) {
					display: block;
					margin-top: 15rpx;
					border-bottom: none;
				}
			}
		}
	}

	.item_conten {
		background-color: #ffffff;
		margin: 20rpx 20rpx 60rpx 20rpx;

		.rescueItem {
			padding: 30rpx 20rpx;
			border-top: 1px solid #eee;
			color: #999999;
			font-size: 24rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				view {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
				}
			}

			.tag{
				color: #E02020;
				border: 1px solid #E02020;
				width: 64rpx;
				height: 32rpx;
				text-align: center;
				line-height: 32rpx;
				font-size: 24rpx;
				border-radius: 4rpx;
				margin: 20rpx 0;
			}

			.rescueItem_opt {
				margin: 10rpx 0;
			}
		}

		.conten {
			.conten_tit {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				padding: 30rpx 20rpx 10rpx 20rpx;

				view:nth-child(1) {
					flex: 0 0 620rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
				}

				view:nth-child(2) {
					flex: 1;
					margin-left: 20rpx;

					text:nth-child(1) {
						display: block;
						width: 18rpx;
						height: 18rpx;
						border-right: 2rpx #999999 solid;
						border-bottom: 2rpx #999999 solid;
						transform: rotate(-45deg);
					}
				}
			}

			.conten_main {
				.main {
					display: inline-block;
					padding: 5rpx;
					margin: 15rpx 10rpx;
					margin-left: 20rpx;
					border: 2rpx solid #6dd400;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #6dd400;
				}
			}

			.conten_time {
				.time {
					display: block;
					margin-left: 20rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.conten_line {
				width: 680rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				border-bottom: 2rpx #eeeeee solid;
			}
		}
	}

	.empty {
		padding-top: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #999;
		min-height: 600rpx;

		image {
			width: 128rpx;
			height: 128rpx;
			margin-bottom: 16rpx;
		}
	}
}
</style>
